<template>
  <a-row :gutter="10">
    <a-col :md="0" :sm="0" v-if="false">
      <a-card :bordered="false">
        <div style="background: #fff; padding-left: 16px; height: 100%; margin-top: 5px">
          <!-- <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/> -->
          <!-- 树-->

          <template v-if="departTree.length > 0">
            <!--组织机构-->
            <a-tree
              showLine
              :selectedKeys="selectedKeys"
              :checkStrictly="true"
              @select="onSelect"
              :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
              :treeData="departTree"
              :autoExpandParent="autoExpandParent"
              :expandedKeys="iExpandedKeys"
              @expand="onExpand"
            />
          </template>
          <div style="margin-top: 24px" v-else>
            <h3><span>您的部门下暂无有效部门信息</span></h3>
          </div>
          <!-- <div style="margin-top: 24px;" v-else><h3>普通员工暂无此权限</h3></div> -->
        </div>
      </a-card>
    </a-col>
    <a-col :md="24" :sm="24">
      <a-card :bordered="false">
        <a-spin :spinning="spinning">
          <template v-if="departTree.length > 0">
            <div>
              <div class="tags-toggle">
                <div class="left">
                  <p>查询标签</p>
                  <div class="tags">
                    <template v-for="(tag, index) in rootArray">
                      <template v-if="tag.codes.length > 0">
                        <a-tooltip v-if="tooltipString(tag.names).length > 20" :key="tag.title" :title="tooltipString(tag.names)">
                          <a-tag :key="tag.title" :closable="true" @close="() => handleClose(tag, index)"> {{ tag.title }}: {{ tag.names | longString }} </a-tag>
                        </a-tooltip>
                        <a-tag v-else :key="tag.title" :closable="true" @close="() => handleClose(tag, index)"> {{ tag.title }}: {{ tag.names | arrToString }} </a-tag>
                      </template>
                    </template>
                  </div>
                </div>
                <a-button type="link" @click="toggleAdvanced"> {{ advanced ? '收起筛选' : '展开筛选' }}<a-icon :type="advanced ? 'up' : 'down'" /> </a-button>
              </div>
              <div class="tags-content" :style="{ maxHeight: advanced ? '800px' : '130px', width: '100%', overflow: advanced ? 'auto' : 'hidden' }">
                <!-- <a-checkbox-group v-model="checkValue" @change="onCheckChange"> -->
                <QueryTreePare :treeData="departTree" :layer="0" @update="update"></QueryTreePare>
                <!-- </a-checkbox-group> -->
                <!-- <div v-for="(item, index) in departTree" :key="index" class="tag-list">
                <p class="type-title">{{ item.title }}:</p>
                <div v-if="!item.leaf" class="type-content">
                  <a-checkbox-group v-model="item.checked" @change="e => onChange(e, item)">
                    <div class="leaf-list">
                      <div v-for="(secondItem,secondIndex) in leafList(item.children)" :key="secondIndex" class="second-tag">
                        <a-checkbox :value="secondItem.code">{{ secondItem.title }}</a-checkbox>
                      </div>
                    </div>
                    <div class="not-leaf-list">
                      <div v-for="(secondItem,secondIndex) in notLeafList(item.children)" :key="secondIndex" class="second-tag">
                        <div  class="third-tag">
                          <p><span>{{ secondItem.title }}</span>:</p>
                          <a-checkbox :value="thirdItem.code" v-for="(thirdItem,thirdIndex) in secondItem.children" :key="thirdIndex">{{ thirdItem.title }}</a-checkbox>
                        </div>
                      </div>
                    </div>
                  </a-checkbox-group>
                </div>
              </div> -->
                <!-- <a-button type="primary" @click="sumbitTags" class="submit">确定</a-button> -->
              </div>
              <!-- <a-divider></a-divider> -->
              <!-- <div class="table-page-search-wrapper">
                <a-form layout="inline"> -->
              <!-- <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                      <a-form-item label="样衣号">
                        <a-input v-model="queryParam.name" placeholder="请输入" />
                      </a-form-item>
                    </a-col> -->
              <!-- <a-col :md="8" :sm="24">
                      <a-form-item label="品牌">
                        <a-select v-model="queryParam.brand" placeholder="请选择" :dropdownStyle="{ zIndex: '5' }">
                          <a-select-option value="all">全部</a-select-option>
                          <a-select-option v-for="(item, index) in brandList" :key="index" :value="item">{{ item }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col> -->
              <!-- <a-col :md="6" :sm="24">
                    <a-form-item label="大类">
                      <a-select
                        v-model="queryParam.bigCategoryId"
                        placeholder="请选择"
                        :dropdownStyle="{ zIndex: '5' }"
                        @change="e => handleChangeSelect(e, 'big')"
                      >
                        <a-select-option value="all">全部</a-select-option>
                        <a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.key">{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="24">
                    <a-form-item label="小类">
                      <a-select
                        v-model="queryParam.smallCategoryId"
                        default-value="all"
                        placeholder="请选择"
                        :dropdownStyle="{ zIndex: '5' }"
                        @change="e => handleChangeSelect(e, 'small')"
                      >
                        <a-select-option value="all">全部</a-select-option>
                        <a-select-option v-for="(item, index) in scategoryList" :key="index" :value="item.key">{{ item.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col> -->
              <!-- <a-col :md="8" :sm="24">
                      <a-form-item label="年份">
                        <a-select v-model="queryParam.year" placeholder="请选择" default-value="all" :dropdownStyle="{ zIndex: '5' }">
                          <a-select-option value="all">全部</a-select-option>
                          <a-select-option v-for="(item, index) in yearsList" :key="index" :value="item">{{ item }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                      <a-form-item label="波段">
                        <a-select v-model="queryParam.m_band" placeholder="请选择" default-value="all" :dropdownStyle="{ zIndex: '5' }">
                          <a-select-option value="all">全部</a-select-option>
                          <a-select-option v-for="(item, index) in bandsList" :key="index" :value="item">{{ item }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col> -->
              <!-- <a-col :md="8" :sm="24">
                      <a-form-item label="季节">
                        <a-select v-model="queryParam.big_season" placeholder="请选择" default-value="all" :dropdownStyle="{ zIndex: '5' }">
                          <a-select-option value="all">全部</a-select-option>
                          <a-select-option v-for="(item, index) in seasonList" :key="index" :value="item">{{ item }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-col> -->
              <!-- <a-col :md="8" :sm="24">
                      <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden', marginBottom: 0, marginTop: '24px' }"> -->
              <!-- <a-popconfirm title="确定导出当前条件下的商品?" ok-text="Yes" cancel-text="No" @confirm="confirm" @cancel="cancel">
                        <a-button>导出</a-button>
                      </a-popconfirm> -->
              <!-- 
                        <a-button type="primary" @click="searchList">查询</a-button>
                        <a-button style="margin-left: 8px" @click="resetList">重置</a-button> -->
              <!-- </span>
                    </a-col>
                  </a-row>
                </a-form> -->
              <!-- </div> -->
            </div>
          </template>
          <template v-else>
            <p>您的部门下暂无有效标签</p>
          </template>
        </a-spin>
      </a-card>

      <a-card :bordered="false" :style="{ marginTop: '24px' }" class="filter-card">
        <FilterTree
          :treeData="paramTree"
          :searchPlaceholder="'请输入样衣号搜索'"
          @updateParams="updateParams"
          @updateSearchText="updateSearchText"
          :initialRootArray="initialFilterArray"
          :useActiveCodeObj="true"
        ></FilterTree>
        <a-divider></a-divider>
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-col :md="8" :sm="24">
              <a-form-item label="波段">
                <a-tooltip>
                  <template slot="title" v-if="queryParam.bandIds && queryParam.bandIds.length > 4">
                    {{ bandsName(queryParam.bandIds, bandsList) }}
                  </template>
                  <a-select
                    mode="multiple"
                    :maxTagCount="4"
                    autoClearSearchValue
                    show-search
                    allowClear
                    v-model="queryParam.bandIds"
                    placeholder="请选择波段"
                    :filter-option="filterOption"
                    @change="searchList"
                  >
                    <a-select-option v-for="(item, index) in bandsList" :key="index" :value="item.id">{{ item.attribname }}</a-select-option>
                  </a-select>
                </a-tooltip>
              </a-form-item>
            </a-col>
          </a-form>
        </div>
      </a-card>
      <a-card :style="{ marginTop: '24px' }" class="list-content">
        <div class="ant-pro-pages-list-projects-cardList" style="clear: both">
          <!-- :grid="{ xxl: 6, xl: 6, lg: 4, md: 3, sm: 2, xs: 1 }" -->
          <a-list :loading="loading" :data-source="goodsList" :grid="{ gutter: 0 }">
            <div v-if="showLoadingMore" slot="loadMore" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
              <a-spin v-if="loadingMore" />
              <a-button v-else @click="onLoadMore"> loading more </a-button>
            </div>
            <a-list-item slot="renderItem" slot-scope="item, index">
              <a-card class="ant-pro-pages-list-projects-card" hoverable>
                <!-- <img slot="cover" src="https://img.bzhz.jnbygroup.com/cloth.png" :alt="item.value" @click="editGoodsTags(item, index)" /> -->
                <!-- <img slot="cover" :src="`https://bzhz.jnbygroup.com/jnbyimages/${item.brand}/${item.skc_id}.png`" :alt="item.value" @click="editGoodsTags(item, index)" style="padding:12px" /> -->
                <img slot="cover" :src="`https://bzhz.jnbygroup.com/jnbyimages/${item.brand}/skc/${item.skc_id}.png`" :alt="item.value" @click="editGoodsTags(item, index)" style="padding: 12px" />
                <!-- <img slot="cover" :alt="item.value" src="https://img.bzhz.jnbygroup.com/cloth.png" v-else @click="toDetail(item)" /> -->
                <!-- <p>款号：{{ item.name }}</p> -->
                <div class="cardItemContent">
                  <h3>{{ item.brand }} {{ item.name }}</h3>
                  <p class="title">颜色：{{ item.color_name }}</p>
                  <p class="price">波段：{{ item.m_band }}</p>
                  <p class="price">季节：{{ item.big_season }}</p>
                  <!--<p class="price">吊牌价：¥{{ item.price }}.00</p> -->
                  <!-- <p>销量：{{ item.sales_num }}</p>
                    <p>{{ item.colorno }}/{{ item.color_name }}</p>
                    <p class="blue">库存：{{ item.currentSku.stock }}</p>
                    <div class="size-box">
                      <a-radio-group v-model="item.currentSku.sizeno" button-style="solid" @change="e=>sizeChange(e,index)">
                        <a-radio-button :value="sizeItem.sizeno" v-for="(sizeItem,sizeIndex) in item.skus" :key="sizeIndex" :id="sizeItem.id">
                          {{ sizeItem.size_name }}
                        </a-radio-button>
                      </a-radio-group>
                    </div> -->
                </div>
                <div class="btn">
                  <a-button type="link" icon="edit" :loading="item.iconLoading" @click="editGoodsTags(item, index)" block>查看标签</a-button>
                </div>
              </a-card>
            </a-list-item>
          </a-list>
        </div>
      </a-card>
    </a-col>

    <GoodsDetailDrawer :goodsInfo="goodsInfo" :showDrawer="showDrawer" :permisTree="departTreeEdit" @close="close"></GoodsDetailDrawer>
    <QuerySampleTagsModal ref="modalGoods" :treeData="departTreeEdit" @updateEdit="updateEdit" :currentTotal="currentTotal" :total="total" @loadingPage="loadingPage"></QuerySampleTagsModal>
    <a-modal v-model="showUploadLoading" :maskClosable="false" :footer="false" :closable="false" :dialog-style="{ top: '200px' }">
      <p class="export-text" v-if="uploading"><a-spin size="small" /><span>正在导出中...</span></p>
      <p class="export-text" v-else><a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a" /><span>导出成功！</span></p>
      <div v-show="!uploading" class="export-btn-box ant-modal-footer">
        <a-button @click="showUploadLoading = false">关闭</a-button>
        <a download :href="file" @click="showUploadLoading = false" class="export-btn ant-btn-primary ant-btn"> 下载 </a>
      </div>
    </a-modal>
  </a-row>
</template>
<script>
import { queryDim, queryCatePermisListByDepart, queryGoods, querySampleGoodSkc, querySampleProductFilter } from '@/api/goods'
import { tagMixin } from '../mixins/tagsMixin'
import FilterTree from '@/views/box/components/FilterTree'
import GoodsDetailDrawer from './modules/GoodsDetailDrawer'
import QuerySampleTagsModal from './modules/QuerySampleTagsModal'
import QueryTreePare from './modules/QueryTreePare'
import { fetchExportFileId, queryExportSuccess } from '@/assets/js/common'

export default {
  mixins: [tagMixin],
  components: {
    GoodsDetailDrawer,
    QuerySampleTagsModal,
    QueryTreePare,
    FilterTree
  },
  data() {
    return {
      departTree: [],
      departTreeEdit: [],
      autoExpandParent: true,

      selectedKeys: [],
      iExpandedKeys: [],
      tags: [],
      advanced: false,
      checkValue: [],
      queryParam: {
        brand: 'all',
        // bigCategoryId: 'all',
        // smallCategoryId: 'all',
        year: 'all',
        m_band: 'all',
        big_season: 'all',
        mustLabels: []
      },
      brandList: [],
      categoryList: [],
      scategoryList: [],
      yearsList: [],
      bandsList: [],
      seasonList: [],
      loading: false,
      loadingMore: false,
      showLoadingMore: false,
      goodsList: [],
      pageSize: 20,
      current: 1,
      total: 0,
      pages: 0,
      currentTotal: 0,
      goodsInfo: {},
      showDrawer: false,
      timer: null,
      showUploadLoading: false,
      file: '',
      uploading: true,
      rootArray: [],
      spinning: true
    }
  },
  computed: {
    leafList() {
      return data => {
        let result = []
        result = data.filter(item => item.leaf)
        return result
      }
    },
    notLeafList() {
      return data => {
        let result = []
        result = data.filter(item => !item.leaf)
        return result
      }
    },
    tooltipString() {
      return v => {
        return v.join('、')
      }
    }
  },
  filters: {
    arrToString(v) {
      return v.join('、')
    },
    longString(v) {
      return v.join('、').slice(0, 20) + '...'
    }
  },
  mounted() {
    this.fetchData()
  },
  beforeDestroy() {
    // 页面销毁后同时清除定时器，避免占用内存
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    // 搜索
    searchList() {
      if (this.rootArray.length == 0) {
        this.queryParam.mustLabels = []
      } else {
        console.log(this.rootArray)
        if (this.rootArray.length > 0) {
          let newArr = []
          for (let item of this.rootArray) {
            newArr.push.apply(newArr, item.codes)
          }
          console.log(newArr)
          this.queryParam.mustLabels = newArr
        }
      }
      this.loading = true
      this.showBottom = false
      this.isRefreshBool = false
      this.current = 1
      this.goodsList = []
      const param = JSON.parse(JSON.stringify(this.queryParam))
      this.fetchList(param)
    },
    async fetchData() {
      await this.getSelectList()
      await this.getFilterTree()
      await this.getCate()
      const params = JSON.parse(JSON.stringify(this.queryParam))
      await this.fetchList(params)
    },
    // 筛选条件
    getSelectList() {
      return queryDim().then(res => {
        if (res.code === 0) {
          this.bandsList = res.data.bandsV2
          this.yearsList = res.data.years
          this.categoryList = res.data.categoryTrees
          // this.scategoryList = this.categoryList[0].childCategory
          this.brandList = this.categoryList[0].brands
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 筛选条件
    // getSelectList() {
    //   return querySampleProductFilter().then(res => {
    //     if (res.code === 0) {
    //       this.bandsList = res.data.bands
    //       this.yearsList = res.data.years
    //       this.seasonList = res.data.seasons
    //       this.brandList = res.data.brand
    //       // this.categoryList = res.data.categoryTrees
    //       // this.scategoryList = this.categoryList[0].childCategory
    //     } else {
    //       this.$message.warning(res.msg)
    //     }
    //   })
    // },
    // 获取可选择标签
    getCate() {
      let params = {
        code: 'B05'
      }
      return queryCatePermisListByDepart(params).then(res => {
        if (res.success) {
          // this.departTree = res.result
          if (res.result.length > 0) {
            // 编辑标签tree
            let list = JSON.parse(JSON.stringify(res.result))
            this.departTreeEdit = list.map(item => {
              const checked = {
                checked: [],
                checkedName: []
              }
              return { ...item, ...checked }
            })
            console.log(this.departTreeEdit)
            // 筛选条件tree
            let data = this.handleArr(res.result)
            this.departTree = data.map(item => {
              const checked = {
                checked: [],
                checkedName: []
              }
              return { ...item, ...checked }
            })
            this.initialRootArray(res.result)
            // console.log(this.rootArray)
            for (let item of this.rootArray) {
              if (item.codes.length > 0) this.queryParam.mustLabels.push.apply(this.queryParam.mustLabels, item.codes)
            }
          }
        } else {
          this.$message.warning(res.message)
        }
        this.spinning = false
      })
    },
    // 处理departTree
    handleArr(data) {
      for (let item of data) {
        if (item.children && item.children.length > 0) {
          const result = item.children.filter(v => v.leaf == true)
          if (result.length == item.children.length) {
            // ------2021-12-9 取消初始化查询所有标签-------
            /* Object.assign(item, {
              checkValue: item.children,
              indeterminate: false,
              checkAll: true,
              checkList: item.children.map(e => e.code)
            }) */
            Object.assign(item, {
              checkValue: [],
              indeterminate: true,
              checkAll: false,
              checkList: []
            })
          } else {
            this.handleArr(item.children)
          }
        } else {
          Object.assign(item, {
            checkValue: [],
            indeterminate: false,
            checkAll: false,
            checkList: []
          })
        }
      }
      return data
    },
    // 初始化RootArray
    initialRootArray(data) {
      console.log('------初始化RootArray-----初始化RootArray')
      this.rootArray = data.map(e => {
        return {
          code: e.code,
          title: e.title,
          codes: [],
          names: [],
          list: []
        }
      })
      // ------2021-12-9 取消初始化查询所有标签-------
      /* for (let item of this.rootArray) {
        let code = item.code
        let result = this.departTree.filter(e => e.code == code)
        if (result.length > 0) {
          let arr = []
          item.list = this.getInitialRootArrayList(result, arr)
          item.codes = item.list.map(e => e.code)
          item.names = item.list.map(e => e.title)
        }
      } */
      // console.log(this.rootArray)
    },
    getInitialRootArrayList(list, arr) {
      for (let item of list) {
        if (item.children && item.children.length > 0) {
          const result = item.children.filter(e => e.leaf)
          if (item.children.length == result.length) {
            arr.push.apply(arr, item.children)
          } else {
            this.getInitialRootArrayList(item.children, arr)
          }
        }
      }
      return arr
    },
    // 更新回传打标的值
    update(value) {
      console.log(value)
      // 处理rootArray
      const result = this.rootArray.filter(v => value.code.includes(v.code))
      if (result.length > 0) {
        // 处理list
        if (result[0].list.length == 0) {
          // list 完全为空
          result[0].list = [...result[0].list, ...value.codes]
        } else {
          // list非空
          // 含有对应code的list
          let listResult = result[0].list.filter(e => e.code.includes(value.code))
          // 非含有对应code的list
          let notListResult = result[0].list.filter(e => !e.code.includes(value.code))
          if (value.codes.length == 0) {
            listResult = []
          } else {
            listResult = value.codes
          }
          // console.log(listResult)
          result[0].list = [...notListResult, ...listResult]
        }
        // 处理codes & names
        if (result[0].list.length > 0) {
          result[0].codes = result[0].list.map(e => e.code)
          result[0].names = result[0].list.map(e => e.title)
        } else {
          result[0].codes = []
          result[0].names = []
        }
        console.log(result)
      }
      console.log(this.rootArray)
      // 更新departTree
      const resultTree = this.departTree.filter(v => value.code.includes(v.code))
      if (resultTree.length > 0) {
        this.updateTree(resultTree, value)
      }
      console.log(this.departTree)
      this.searchList()
    },
    updateTree(list, obj) {
      for (let item of list) {
        if (item.children && item.children.length > 0) {
          const result = item.children.filter(e => e.leaf)
          if (result.length == item.children.length) {
            if (item.code == obj.code) {
              if (obj.codes.length > 0) {
                Object.assign(item, {
                  checkValue: obj.codes,
                  indeterminate: !!obj.codes.length && obj.codes.length < item.children.length,
                  checkAll: obj.codes.length == item.children.length ? true : false,
                  checkList: obj.codes.map(e => e.code)
                })
              } else {
                Object.assign(item, {
                  checkValue: [],
                  indeterminate: false,
                  checkAll: false,
                  checkList: []
                })
              }
            }
          } else {
            this.updateTree(item.children, obj)
          }
        }
      }
    },
    // 筛选标签
    /* onChange(checkedValues, item) {
      // console.log('checked = ', checkedValues)
      // console.log(item)
      let arr = []
      let checkedName = []
      let children = item.children
      if (checkedValues.length > 0) {
        for (var i = 0; i < children.length; i++) {
          if (children[i].leaf) {
            // 叶子
            const result = checkedValues.filter(item => item == children[i].code)
            if (result.length > 0) {
              checkedName.push(children[i].title)
              arr.push(children[i])
            }
          } else {
            const nextChildren = children[i].children
            // 非叶子
            for (var j = 0; j < nextChildren.length; j++) {
              const result = checkedValues.filter(item => item == nextChildren[j].code)
              if (result.length > 0) {
                checkedName.push(nextChildren[j].title)
                arr.push(nextChildren[j])
              }
            }
          }
        }
        item.checkedName = checkedName
        // console.log(arr)
        // 有选中标签
        if (checkedName.length > 0) {
          const obj = {
            title: item.title,
            tag: checkedName,
            content: checkedName.join(','),
            arr: arr
          }
          // console.log(obj)
          if (this.tags.length == 0) {
            this.tags.push(obj)
          } else {
            let index = this.tagIndex(obj, this.tags)
            if (index != -1) {
              this.tags[index] = obj
            } else {
              this.tags.push(obj)
            }
          }
        }
        // console.log(item.checkedName)
      } else {
        const title = item.title
        const resetTags = this.tags.filter(item => item.title !== title)
        this.tags = resetTags
        item.checkedName = []
      }
      console.log(this.tags)
    },
    onCheckChange(checkedValues) {
      console.log('checked = ', checkedValues)
      let allParentCode = this.departTree.map(item => item.code)
      if (checkedValues.length > 0) {
        this.tags = []

        for (var i = 0; i < allParentCode.length; i++) {
          const code = allParentCode[i]
          let result = checkedValues.filter(item => {
            if (item.code.indexOf(code) > -1) {
              return item
            }
          })
          if (result.length > 0) {
            const checkedName = result.map(v => v.title)
            const obj = {
              title: this.departTree[i].title,
              tag: checkedName,
              content: checkedName.join(','),
              arr: result
            }
            console.log(obj)
            if (this.tags.length == 0) {
              this.tags.push(obj)
            } else {
              let index = this.tagIndex(obj, this.tags)
              if (index != -1) {
                this.tags[index] = obj
              } else {
                this.tags.push(obj)
              }
            }
          }
        }
        console.log(this.tags)
      } else {
        this.tags = []
      }
    },
    tagIndex(obj, arr) {
      let tagIndex = -1
      for (var a = 0; a < arr.length; a++) {
        if (arr[a].title == obj.title) {
          tagIndex = a
          return tagIndex
          break
        }
      }
      return tagIndex
    }, */

    // 删除筛选条件中的标签
    handleClose(removedTag, index) {
      console.log(removedTag, index)
      const result = this.departTree.filter(item => item.code == removedTag.code)
      if (result.length > 0) {
        this.setTagList(result)
      }
      const resultList = this.rootArray.filter(e => e.code == removedTag.code)
      if (resultList.length > 0) {
        resultList[0].codes = []
        resultList[0].names = []
        resultList[0].list = []
      }
      // this.rootArray[index].codes = []
      // this.rootArray[index].names = []
      // this.rootArray[index].list = []
      console.log(this.rootArray)
      console.log(this.departTree)
      this.searchList()
      /* const removeArr = this.tags[index].arr
      this.checkValue = this.checkValue.filter(item => {
        let idList = removeArr.map(v => v.code)
        return !idList.includes(item.code)
      })
      console.log(this.checkValue)
      const tags = this.tags.filter(tag => tag.title !== removedTag.title)
      this.tags = tags */
      /* for(var i=0;i<this.departTree.length;i++){
        if(removedTag.title==this.departTree[i].title){
          this.departTree[i].checkedName = []
          this.departTree[i].checked = []
          break
        }
      }   */
      // console.log(this.departTree)
    },
    // 处理筛选条件中删除的标签数组
    setTagList(data) {
      for (let item of data) {
        if (item.children && item.children.length > 0) {
          const result = item.children.filter(e => e.leaf == true)
          if (item.children.length == result.length) {
            Object.assign(item, {
              checkValue: [],
              indeterminate: false,
              checkAll: false,
              checkList: []
            })
          } else {
            this.setTagList(item.children)
          }
        }
      }
    },

    // 确认筛选的tags
    /* sumbitTags() {
      console.log(this.tags)
      const newArrSt = this.tags
        .map(item => {
          const chArr = item.arr.map(item => item.code).join(',')
          return chArr
        })
        .join(',')
      console.log(newArrSt)
      if (newArrSt.length > 0) {
        const newArr = newArrSt.split(',')
        console.log(newArr)
        this.queryParam.mustLabels = newArr
      } else {
        this.queryParam.mustLabels = []
      }
      this.searchList()
    }, */

    // 展开收起
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    // 筛选条件：下拉选择
    handleChangeSelect(value, type) {
      console.log(value, type)
      switch (type) {
        case 'big':
          const option = this.categoryList.filter(item => {
            if (item.key === value) {
              return item
            }
          })
          this.scategoryList = option[0].childCategory
          this.queryParam.smallCategoryId = 'all'
          break
      }
    },
    // 搜索
    searchList() {
      if (this.rootArray.length == 0) {
        this.queryParam.mustLabels = []
      } else {
        console.log(this.rootArray)
        if (this.rootArray.length > 0) {
          let newArr = []
          for (let item of this.rootArray) {
            newArr.push.apply(newArr, item.codes)
          }
          console.log(newArr)
          this.queryParam.mustLabels = newArr
        }
      }
      this.current = 1
      this.goodsList = []
      const param = JSON.parse(JSON.stringify(this.queryParam))
      this.fetchList(param)
    },
    // 重置
    resetList() {
      this.queryParam = {
        brand: 'all',
        // bigCategoryId: 'all',
        // smallCategoryId: 'all',
        year: 'all',
        m_band: 'all',
        big_season: 'all',
        mustLabels: []
      }
      this.tags = []
      for (var i = 0; i < this.departTree.length; i++) {
        this.departTree[i].checked = []
        this.departTree[i].checkedName = []
      }
      this.searchList()
    },
    // 加载更多
    onLoadMore() {
      this.loadingMore = true
      this.current += 1
      const param = JSON.parse(JSON.stringify(this.queryParam))
      this.fetchList(param)
    },
    fetchList(param) {
      if (param.brand === 'all') {
        delete param.brand
      }
      /* if (param.bigCategoryId === 'all') {
        delete param.bigCategoryId
      }
      if (param.smallCategoryId === 'all') {
        delete param.smallCategoryId
      } */
      if (param.year === 'all') {
        delete param.year
      }
      if (param.m_band === 'all') {
        delete param.m_band
      }
      if (param.big_season === 'all') {
        delete param.big_season
      }
      if (param.name) {
        param = {
          name: param.name.trim()
        }
      }
      let data = {
        page: {
          pageNo: this.current,
          pageSize: this.pageSize
        },
        requestData: param
      }
      return querySampleGoodSkc(data).then(res => {
        if (res.code == 0) {
          if (res.data.length > 0) {
            this.current = res.page.pageNo
            this.total = res.page.count
            this.pages = res.page.pages
            this.currentTotal = this.current * this.pageSize
            console.log(this.currentTotal)
            const dataList = res.data
            this.goodsList = this.goodsList.concat(dataList)
            if (res.page.pageNo < res.page.pages) {
              this.showLoadingMore = true
            } else {
              this.showLoadingMore = false
            }
            this.loading = false
            this.loadingMore = false
          } else {
            this.showLoadingMore = false
          }
        }
      })
    },
    loadingPage(value) {
      if (value) {
        this.onLoadMore()
      }
    },
    onSelect(selectedKeys, e) {
      if (this.selectedKeys[0] !== selectedKeys[0]) {
        this.selectedKeys = [selectedKeys[0]]
      }
      let record = e.node.dataRef
      console.log(record)
      // this.checkedKeys.push(record.id);
      // this.$refs.DeptBaseInfo.open(record);
      // this.$refs.DeptUserInfo.onClearSelected();
      // this.$refs.DeptUserInfo.open(record);
      // this.$refs.DeptRoleInfo.onClearSelected();
      // this.$refs.DeptRoleInfo.open(record);
    },
    onExpand(expandedKeys) {
      // console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    toDetail(item, index) {
      console.log(item, index)
      // this.$router.push(`/goods/detail/${item.id}`)
      this.goodsInfo = {
        productId: item.skc_id,
        index: index
      }
      console.log(this.goodsInfo)
      this.showDrawer = true
    },
    close(value) {
      this.showDrawer = false
    },
    editGoodsTags(item, index) {
      this.$refs.modalGoods.edit(item, index)
    },
    updateEdit(index) {
      this.$refs.modalGoods.edit(this.goodsList[index], index)
    },
    // 导出
    async confirm(e) {
      console.log(e)
      // this.$message.success('Click on Yes');

      const param = JSON.parse(JSON.stringify(this.queryParam))
      if (param.brandId === 'all') {
        delete param.brandId
      }
      if (param.bigCategoryId === 'all') {
        delete param.bigCategoryId
      }
      if (param.smallCategoryId === 'all') {
        delete param.smallCategoryId
      }
      if (param.year === 'all') {
        delete param.year
      }
      if (param.bandId === 'all') {
        delete param.bandId
      }
      let result = await fetchExportFileId(param, 2)
      if (result) {
        this.uploading = true
        this.showUploadLoading = true
        let that = this
        queryExportSuccess(this.timer, result, 180000, function(x, url) {
          console.log(x, url)
          if (url && x == 'done') {
            that.uploading = false
            that.file = url
          } else {
            console.log('解析失败')
            that.showUploadLoading = false
            // that.$message.warning('解析失败')
          }
        })
      }
    },
    cancel(e) {
      console.log(e)
      // this.$message.error('Click on No');
    }
  }
}
</script>
<style lang="less" scoped>
@import './less/index.less';
.export-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto;
  font-size: 18px;
  span {
    margin-left: 12px;
    display: inline-block;
  }
}
.export-btn-box {
  display: flex;
  align-items: center;
  margin: 48px -24px -24px;
  justify-content: flex-end;
  .export-btn {
    display: block;
    margin-left: 12px;
  }
}
</style>

